<template>
	<view class="content">
		<view class="pay-box">
			<view class="pay-item">
				<view class="item-top">
					<view class="item-img"><image src="@/static/img/pay-for-incon3.png" mode="aspectFit"></image></view>
					<view class="item-txt">
						<!-- TODO 微信好友名字-->
						<view class="txt-phone">*</view>
						<view class="txt-thank">帮我付下这件商品吧，谢谢啦~</view>
					</view>
				</view>
				<view class="item-info">
					<view class="info-title">代付金额</view>
					<view class="info-symbol">
						￥
						<view class="info-price">{{ info.money }}</view>
					</view>
					<template v-if="Object.keys(info).length > 0">
						<view class="paySuc green" v-if="info.ispays == '1'">
							<image src="@/static/img/green-scu.png" mode="aspectFit"></image>
							<text>支付成功</text>
						</view>
            <view class="paySuc" v-else-if="info.ispays == '2'">
              <text>订单取消</text>
            </view>
						<view class="info-transmit" @click="confirmPay" v-else>立即支付</view>
					</template>
					<view class="info-txt">如果订单申请退款，已支付金额将原路退还给代付发起人</view>
					<view class="info-cut"></view>
          <!--        产品详情-->
          <view class="item-contentinfo" @click="toOrderDetail" v-if="scene=='1'">
            <view class="item-content-left">
              <image class="image-wrapper" :src="order_info.product_image||'https://oss.bigchun.com/fali/uploads/20211027/f93e7f181e6016610841c444d5eb26c4.png'" ></image>
            </view>
            <view class="item-content-right">
              <view class="item-info-title">
                <view class="item-info-titles">
                  {{ order_info.pro_title }}
                </view>
                <view class="image-wrapper2">
                  <img class="image-wrapper" src="../../../static/img/right.png" mode="aspectFit"/>
                </view>
              </view>
              <view class="item-info-order">
                <text class="text-ellipsis" style="font-size: 12px">订单号 ： {{ order_info.order_sn }}</text>
              </view>
              <law-product-intro3 class="gray"  v-if="order_info" :item="order_info"  :isshou="3" :userInfo="userInfo"></law-product-intro3>
              <order-list-other-nopay3 class="gray"  v-if="order_info" :item="order_info"  :isshou="3" :userInfo="userInfo"></order-list-other-nopay3>
            </view>
          </view>
				</view>

			</view>
		</view>
		<!-- 全局通用组件 -->
		<law-common ref="lawCommon"></law-common>
	</view>
</template>

<script>
import wx from 'weixin-js-sdk';
import { mapGetters, mapMutations } from 'vuex';
export default {
	data() {
		return {
			info: {},
			order_id: '',
			pay_type: '',
			wxcode: '', //微信h5支付
			open_id: '',
			order_info:'',
			scene:'1', //1是提交订单进入  2是 其他方式进入
			token:'',
			orderxiangqing_id:'',//订单详情id orderxiangqing_id:''//订单详情id
			btmbtns:false,
		};
	},
  computed: {
    ...mapGetters(['userInfo'])
  },
	onLoad(options) {
		let routes = getCurrentPages();
		let curParam = routes[routes.length - 1].options;
		this.order_id = curParam.order_id;
		this.pay_type = curParam.pay_type;
		this.scene = curParam.scene
    this.token =  curParam.token
	},
	onShow() {
		this.wxcode = this.getCode();
		if (!this.wxcode) {
			//去授权
			this.wx_login();
		} else {
			this.getOderId();
     		this.init();
     		this.getshareInfo();
		}
  },
	methods: {
    async getshareInfo(){
      // wx配置
      var pageUrl ={
        url:(window.location.href).split('#')[0]
      };
      let res = await this.$api('index.newshare',pageUrl);
      let sign = res.data;
      console.log("=====sign",sign)
      wx.config({
        debug: false,
        appId: sign.appId,
        timestamp: sign.timestamp,
        nonceStr: sign.nonceStr,
        signature: sign.signature,
        jsApiList: sign.jsApiList
      });
      wx.ready(() => {
        console.log("====wx",wx)
        // 朋友圈
        let shareData = {
          title: '请帮我付下款啦，万分感谢。',
          desc: `我在法力app上找律师帮我办事，实惠方便。`,
          link:`${this.$VIEW_URL}/#/pages/client/user/friend-pay?order_id=${this.order_id}*${this.pay_type}*${this.scene}*${this.token}`,
          imgUrl:`${this.$API_URL}/source/go.png`,
        }
        console.log("=====shareData",shareData)
        if(wx.updateTimelineShareData){
          wx.updateTimelineShareData(shareData)
        }else{
          wx.onMenuShareTimeline(shareData);
        }
        if(wx.updateAppMessageShareData) {
          wx.updateAppMessageShareData(shareData)
        }else{
          wx.onMenuShareAppMessage(shareData);
        }
      });
    },
		// 微信授权登录
		async wx_login() {
			let formData = {
				url: `${this.$VIEW_URL}/#/pages/client/user/friend-pay?order_id=${this.order_id}*${this.pay_type}*${this.scene}*${this.token}`
			};
			let res = await this.$api('index.wx_code', formData);
			location.href = res.data;
		},
    async init() {
      let formData = {
        id: this.order_id,
        pay_type: this.pay_type,
        token:this.token
      };
      let res = await this.$api('index.friend_pay', formData);
      let res2 = null;
      this.info = res.data;
      if(this.pay_type=="2"||this.pay_type=="3"||this.pay_type=="4"){
        this.orderxiangqing_id = res.data.order_id
      }else{
        this.orderxiangqing_id = this.order_id
      }
	  console.log("===== this.orderxiangqing_id", this.orderxiangqing_id,this.token);
      if(this.pay_type!="5"){
        let formData2 = {
          id: this.orderxiangqing_id,
          token: this.token
        };
        res2 = await this.$api('index.orderDetail', formData2);

        this.order_info = res2.data.order
        this.order_info.product = res2.data.order.pro_name;
        console.log("=======res2",res2,this.order_info )
      }
      if(
		    res.data.pay_status == "1"
     ){
		 this.$set(this.info,'ispays','1')
        // this.info.ispays = "1"
      } else if(
          (this.pay_type=="1"&&(String(res.data.pay_status) == '-1'))
          ||(this.pay_type=="2"&&(String(res.data.pay_status) == '2'||String(res.data.pay_status) == '3'))
          ||(this.pay_type=="3"&&(String(res.data.pay_status) == '2'||String(res.data.pay_status) == '3'))
          ||(this.pay_type=="4"&&(String(res.data.pay_status) == '2'||String(res.data.pay_status) == '3'))
      ){
		 this.$set(this.info,'ispays','2')
        // this.info.ispays = "2"
      }else{
		 this.$set(this.info,'ispays','0')
        // this.info.ispays = "0"
      }
      console.log("===this.info.ispays",this.info.ispays,this.info)
    },

		async confirmPay() {
			let formData = {
				id: this.order_id,
				pay_type: this.pay_type
			};
			// 如果点击支付，没支付，关掉页面。再次点击支付参数失效，传openid给接口
			if (this.open_id) {
				formData = {
					...formData,
					open_id: this.open_id
				};
			} else {
				formData = {
					...formData,
					code: this.wxcode
				};
			}
			let res = await this.$api('index.wx_login', formData);
			this.open_id = res.data.open_id;
			this.onBridgeReady(res.data.response);
		},
		onBridgeReady(wxpay) {
			WeixinJSBridge.invoke(
				'getBrandWCPayRequest',
				{
					appId: wxpay.appId,
					timeStamp: wxpay.timeStamp,
					nonceStr: wxpay.nonceStr,
					package: wxpay.package,
					signType: wxpay.signType,
					paySign: wxpay.paySign
				},
				res => {
				  this.getOderId();
					this.init();
				}
			);
		},
		getCode() {
			let locat_href = window.location.href;
			let array1 = locat_href.split('&');
			let pair = array1[0].split('?');
			let pair2 = pair[1].split('=');
			if (pair2[0] == 'code') {
				return pair2[1];
			} else {
				return '';
			}
		},
    async getOderId() {
      let locat_href = window.location.href;
      console.log("======locat_href",locat_href)
      let array1 = locat_href.split('&');
      let pair = array1[1].split('?');
      let pair2 = pair[1].split('=');
      if (pair2[0] == 'order_id') {
        this.order_id = pair2[1].split('%2a')[0];
        this.pay_type = pair2[1].split('%2a')[1];
        this.scene = pair2[1].split('%2a')[2];
        this.token = pair2[1].split('%2a')[3];
		    uni.setStorageSync('token',this.token)
        console.log("=============pair2",pair2[1].split('%2a'),this.order_id , this.pay_type,this.scene,this.token)
       // let formData = {
       //    id:this.order_id
       // }
       //  let res = await this.$api('index.get_token', formData);
       //  console.log("============res.data",res.data)
       //  this.token  = res.data.token;
      }

		},
    toOrderDetail(){
      let params = {
        order_id: this.orderxiangqing_id,
        product_id: this.orderxiangqing_id,
        area_id: this.order_info.fali_serve_area_id,
        product_name: this.order_info.pro_name,
        bearFees: this.order_info.price_type,
        product_image: this.order_info.bg_image,
        edit: true,
        requirement:this.order_info.requirement,
        liaotian_images:this.order_info.liaotian_images,
        jietiao_images:this.order_info.jietiao_images,
        cuishou_images:this.order_info.cuishou_images,
        other_images:this.order_info.other_images,
        card_images:this.order_info.card_images,
        source:JSON.stringify(this.order_info.source),
        sale:this.order_info.sale,
        serve_name_text:this.order_info.serve_name_text,
        price_type_text:this.order_info.price_type,
        product_price_id:this.order_info.product_price_id,
		    type:'share'
      };
      this.jump('/pages/client/order/order-court-own', params);
    }
	}
};
</script>

<style lang="scss">
page {
	background-color: #f5f5f5;
}
.pay-item {
	background-image: url(@/static/img/pay-for-icon1.png);
	background-repeat: no-repeat;
	height: 360rpx;
	background-size: 100% 100%;
	.item-top {
		display: flex;
    padding: 0 30rpx;
		.item-img {
      width: 66px;
      margin-right: 11px;
      height: 66px;
      margin-top: 15px;
      margin-left: 10px;
      image {
				width: 100%;
				height: 100%;
			}
		}
		.item-txt {
			color: #ffffff;
			.txt-phone {
				font-size: 26rpx;
				padding: 62rpx 0 0 0rpx;
			}
			.txt-thank {
				background-image: url(@/static/img/pay-watch-icon1.png);
				background-repeat: no-repeat;
				height: 60rpx;
				width: 446rpx;
				font-size: 28rpx;
				line-height: 60rpx;
				text-align: center;
				margin: 26rpx 0 51rpx 0rpx;
			}
		}
	}
	.item-info {
		flex: 1;
		width: 710rpx;
		margin: 0 auto;
		background-color: #ffffff;
		border-radius: 16rpx;
		.info-title {
			display: flex;
			justify-content: center;
			padding-top: 42rpx;
			font-size: 28rpx;
			font-weight: bold;
		}
		.info-symbol {
			display: flex;
			justify-content: center;
			padding-top: 41rpx;
			font-size: 34rpx;
			font-weight: bold;
			line-height: 60rpx;
			.info-price {
				font-size: 66rpx;
				line-height: 50rpx;
			}
		}
		.info-transmit {
			display: flex;
			width: 660rpx;
			height: 80rpx;
			margin: 40rpx auto 35rpx;
			justify-content: center;
			align-items: center;
			color: #ffffff;
			font-size: 32rpx;
			background-color: #e02e24;
			border-radius: 10rpx;
		}
		.info-txt {
			display: flex;
			font-size: 26rpx;
			justify-content: center;
			color: #aaa;
		}
		.info-cut {
			height: 1rpx;
			background-color: #e9e9e9;
			margin: 39rpx 25rpx 0;
		}
		.info-bottom {
			display: flex;
			padding-bottom: 36rpx;
			.bottom-img {
				width: 120rpx;
				height: 120rpx;
				margin: 76rpx 17rpx 0 25rpx;
				image {
					width: 100%;
					height: 100%;
				}
			}
			.bottom-right {
				.right-txt {
					font-size: 32rpx;
					line-height: 18rpx;
					margin: 35rpx 0 14rpx;
					font-weight: bold;
				}
				.text-ellipsis {
					.tip-item {
						margin-left: 10rpx;
						font-size: 24rpx;
						color: #747474;
					}
				}
			}
		}
	}
}
.paySuc {
	margin: 20rpx;
	line-height: 40rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	image {
		width: 40rpx;
		height: 40rpx;
		margin-right: 20rpx;
	}
}
.item-contentinfo{
  padding: 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .item-content-left{
    width: 66px;
    margin-right: 11px;
    height: 66px;
    .image-wrapper {
      width: 100%;
      height: 100%;
    }
  }
  .item-content-right {
    flex: 1;
    min-width: 0;
    .item-info-title{
      display: flex;
      justify-content: space-between;
      align-content: center;
      padding-bottom: 5px;
      .item-info-titles{
        font-size: 16px;
      }
      .image-wrapper2 {
        width: 10px;
        height: 16px;
        display: flex;
        align-items: center;
        margin-right: 0;
        .image-wrapper {
          width: 100%;
          height: 100%;
        }
      }
    }
    .item-info-order {
      display: flex;
      justify-content: space-between;
      color: #aaa;
      .text-ellipsis {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
    .item-info-miaoshu{
      display: flex;
      align-items: center;
      padding-bottom: 5px;
      color: #aaa;
    }
    .item-info-price{
      display: flex;
      align-items: center;
      color: #aaa;
    }
  }
}
::v-deep .item-tip{
  padding-bottom: 5px;
}
::v-deep .item-prize{
  color: #aaa!important;
}
::v-deep .gray{
  font-size: 12px!important;
}
::v-deep .gray{
  font-size: 12px!important;
}
</style>
